import React, { useState, ReactNode, useEffect } from 'react';
import { Tabs, Button, Tooltip } from 'antd';
import {
  ExpandOutlined,
  ShrinkOutlined,
  LeftOutlined,
  RightOutlined,
  UpOutlined,
  DownOutlined,
} from '@ant-design/icons';
import styles from './CollapsibleTabCard.module.css';
import { CardState, CollapseDirection } from './CollapsibleCard';


export interface TabItem {
  key: string;
  tab: React.ReactNode;
  content: ReactNode;
}

export interface CollapsibleTabCardProps {
  tabs: TabItem[];
  activeKey?: string;
  onTabChange?: (key: string) => void;
  className?: string;
  style?: React.CSSProperties;
  defaultState?: CardState;
  collapseDirections?: CollapseDirection[];
  onChange?: (state: CardState) => void;
  wrapperClassName?: string;
}

const CollapsibleTabCard: React.FC<CollapsibleTabCardProps> = ({
  tabs,
  activeKey,
  onTabChange,
  className = '',
  style = {},
  defaultState = 'normal',
  collapseDirections = ['left', 'down'],
  onChange,
  wrapperClassName = '',
}) => {
  const [cardState, setCardState] = useState<CardState>(defaultState);
  const [currentKey, setCurrentKey] = useState(activeKey || (tabs.length > 0 ? tabs[0].key : ''));

  useEffect(() => {
    if (activeKey) {
      setCurrentKey(activeKey);
    }
  }, [activeKey]);


  useEffect(() => {
    handleStateChange(defaultState);
  }, [defaultState]);

  const handleStateChange = (newState: CardState) => {
    setCardState(newState);
    if (onChange) {
      onChange(newState);
    }
  };

  const handleTabChange = (key: string) => {
    setCurrentKey(key);
    if (onTabChange) {
      onTabChange(key);
    }
  };

  const getCardClassName = () => {
    let classNames = [styles.collapsibleCard];
    
    if (className) {
      classNames.push(className);
    }
    
    return classNames.join(' ');
  };
  
  const getWrapperClassName = () => {
    let classNames = [styles.cardWrapper];
    
    if (cardState === 'maximized') {
      classNames.push(styles.maximized);
    } else if (cardState === 'collapsedLeft') {
      classNames.push(styles.collapsedLeft);
    } else if (cardState === 'collapsedRight') {
      classNames.push(styles.collapsedRight);
    } else if (cardState === 'collapsedUp') {
      classNames.push(styles.collapsedUp);
    } else if (cardState === 'collapsedDown') {
      classNames.push(styles.collapsedDown);
    }
    
    if (wrapperClassName) {
      classNames.push(wrapperClassName);
    }
    
    return classNames.join(' ');
  };

  const renderExpandIcon = () => {
    if (cardState === 'normal') {
      return (
        <Tooltip title="全屏">
          <Button 
            type="text" 
            size="small"
            icon={<ExpandOutlined />}
            onClick={() => handleStateChange('maximized')}
            className={styles.actionButton}
          />
        </Tooltip>
      );
    } else if (cardState === 'maximized') {
      return (
        <Tooltip title="退出全屏">
          <Button 
            type="text" 
            size="small"
            icon={<ShrinkOutlined />}
            onClick={() => handleStateChange('normal')}
            className={styles.actionButton}
          />
        </Tooltip>
      );
    }
    return null;
  };

  const renderCollapseIcons = () => {
    if (cardState !== 'normal') return null;
    
    return (
      <>
        {collapseDirections.includes('left') && (
          <Tooltip title="向左折叠">
            <Button 
              type="text" 
              size="small"
              icon={<LeftOutlined />}
              onClick={() => handleStateChange('collapsedLeft')}
              className={styles.actionButton}
            />
          </Tooltip>
        )}
        {collapseDirections.includes('right') && (
          <Tooltip title="向右折叠">
            <Button 
              type="text" 
              size="small"
              icon={<RightOutlined />}
              onClick={() => handleStateChange('collapsedRight')}
              className={styles.actionButton}
            />
          </Tooltip>
        )}
        {collapseDirections.includes('up') && (
          <Tooltip title="向上折叠">
            <Button 
              type="text" 
              size="small"
              icon={<UpOutlined />}
              onClick={() => handleStateChange('collapsedUp')}
              className={styles.actionButton}
            />
          </Tooltip>
        )}
        {collapseDirections.includes('down') && (
          <Tooltip title="向下折叠">
            <Button 
              type="text" 
              size="small"
              icon={<DownOutlined />}
              onClick={() => handleStateChange('collapsedDown')}
              className={styles.actionButton}
            />
          </Tooltip>
        )}
      </>
    );
  };

  const getCurrentTab = () => {
    return tabs.find(tab => tab.key === currentKey) || tabs[0];
  };

  const renderCollapsedContent = () => {
    let expandIcon;
    let direction = '';
    
    if (cardState === 'collapsedLeft') {
      expandIcon = <RightOutlined />;
      direction = 'left';
    } else if (cardState === 'collapsedRight') {
      expandIcon = <LeftOutlined />;
      direction = 'right';
    } else if (cardState === 'collapsedUp') {
      expandIcon = <DownOutlined />;
      direction = 'up';
    } else if (cardState === 'collapsedDown') {
      expandIcon = <UpOutlined />;
      direction = 'down';
    }
    
    return (
      <div className={`${styles.collapsedContent} ${styles[`collapsed${direction.charAt(0).toUpperCase() + direction.slice(1)}Content`]}`}>
        <div className={styles.collapsedTabs}>
          {tabs.map(tab => (
            <div 
              key={tab.key} 
              className={`${styles.collapsedTab} ${currentKey === tab.key ? styles.activeCollapsedTab : ''}`}
              onClick={() => handleTabChange(tab.key)}
            >
              {tab.tab}
            </div>
          ))}
        </div>
        <Tooltip title="展开">
          <Button 
            type="text" 
            size="small"
            icon={expandIcon}
            onClick={() => handleStateChange('normal')}
            className={styles.actionButton}
          />
        </Tooltip>
      </div>
    );
  };

  if (cardState === 'collapsedLeft' || cardState === 'collapsedRight' || 
      cardState === 'collapsedUp' || cardState === 'collapsedDown') {
    return (
      <div className={getWrapperClassName()} style={style}>
        <div className={getCardClassName()}>
          {renderCollapsedContent()}
        </div>
      </div>
    );
  }

  return (
    <div className={getWrapperClassName()} style={style}>
      <div className={getCardClassName()}>
        <div className={styles.tabHeader}>
          <div className={styles.tabButtons}>
            {tabs.map(tab => (
              <div
                key={tab.key}
                className={`${styles.tabItem} ${currentKey === tab.key ? styles.activeTab : ''}`}
                onClick={() => handleTabChange(tab.key)}
              >
                {tab.tab}
              </div>
            ))}
          </div>
          <div className={styles.cardActions}>
            {renderExpandIcon()}
            {renderCollapseIcons()}
          </div>
        </div>
        <div className={styles.cardContent}>
          {getCurrentTab().content}
        </div>
      </div>
    </div>
  );
};

export default CollapsibleTabCard; 